<template></template>
<template>
  <div class="home">
    <div class="title">
      <div class="titleleft">
        <img src="../assets/images/home/形状@1x.png" />
        <img src="../assets/images/home/形状@1x-2.png" />
        <img src="../assets/images/home/形状@1x-3.png" />
        <img src="../assets/images/home/形状@1x-4.png" />
      </div>
      <div class="titlecen">
        <div class="titlecen1">
          <img src="../assets/images/home/动态面板@1x.png" />
        </div>
        <div class="titlecen2">
          <img src="../assets/images/home/矩形@1x.png" />
        </div>
        <div class="titlecen3">
          <img src="../assets/images/home/动态面板@1x-2.png" />
        </div>
      </div>
      <div class="titleright">
        <p>{{ timeString }}</p>
      </div>
    </div>
    <div class="boby">
      <div class="bobyleft">
        <div class="bobylefttop"></div>
        <div class="bobyleftcen">
          <div class="bobyleftcenleft">
            <div class="bobyleftcenlefttop">
              <div class="qixiang">
                <LeftOneLeft></LeftOneLeft>
              </div>
              <div class="duibi">
                <LeftOneRight></LeftOneRight>
              </div>
            </div>
            <div class="bobyleftcenleftcen">
              <LeftTwo></LeftTwo>
            </div>
            <div class="bobyleftcenleftfoot">
              <div class="qxian">
                <LeftThreeLeft></LeftThreeLeft>
              </div>
              <div class="mei"></div>
            </div>
          </div>

          <div class="bobyleftcenright">
            <div class="bobyleftcenrighttop"><CentreOne></CentreOne></div>
            <div class="bobyleftcenrightcen"><CentreTwo></CentreTwo></div>
            <div class="bobyleftcenrighfoot"><CentreThree></CentreThree></div>
          </div>
        </div>
      </div>

      <div class="bobyright">
        <div class="bobyrighttop"></div>
        <div class="bobyrighttopcen">
          <RightOne></RightOne>
        </div>
        <div class="bobyrighttopcen1">
          <div class="jizu">
            <RightTwoLeft></RightTwoLeft>
          </div>

          <div class="fadian"><RightTwoRight></RightTwoRight></div>
        </div>
        <div class="bobyrighttopcen2">
          <div class="fuhe"></div>
          <div class="meihao"></div>
        </div>
        <div class="bobyrighttopfoot">
          <div class="jizujie"></div>
          <div class="zhibiao"></div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
import LeftOneLeft from "./left/leftOne/leftOneLfet.vue";
import LeftOneRight from "./left/leftOne/leftOneRight.vue";
import LeftTwo from "./left/leftTwo/index.vue";
import LeftThreeLeft from "./left/leftThree/leftThreeLeft.vue";

import CentreOne from "./centre/centreOne/index.vue";
import CentreTwo from "./centre/centreTwo/index.vue";
import CentreThree from "./centre/centreThree/index.vue";

import RightOne from "./right/rightOne/index.vue";
import RightTwoLeft from "./right/rightTwo/rightTwoLeft.vue";
import RightTwoRight from "./right/rightTwo/rightTwoRight.vue";

export default {
  data() {
    return {
      timeString: "",
      schedule: "",
      time: "",
    };
  },
  components: {
    LeftOneLeft,
    LeftOneRight,
    LeftTwo,
    LeftThreeLeft,

    CentreOne,
    CentreTwo,
    CentreThree,

    RightOne,
    RightTwoLeft,
    RightTwoRight,
  },
  methods: {
    updateTime() {
      const now = new Date();
      // 获取日期和时间
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以需要加1
      const day = String(now.getDate()).padStart(2, "0");
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");

      // 获取星期几
      const weekdays = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      const weekday = weekdays[now.getDay()];

      // 格式化时间字符串
      this.timeString = `${year}年${month}月${day}日 ${weekday} ${hours}:${minutes}:${seconds}`;
      this.time = `${year}年${month}月${day}日 ${weekday} `;
      this.schedule = ` ${hours}:${minutes}:${seconds}`;
    },
  },
  mounted() {
    this.updateTime(); // 初始化时间
    setInterval(this.updateTime, 1000); // 每秒更新一次
  },
};
</script>

<style lang='scss' scoped>
.home {
  width: 100%;
  height: 100%;
  background: #001733;
  .title {
    width: 100%;
    height: 200px;
    background: url(../assets/images/home/title.png) no-repeat;
    display: flex;
    .titleleft {
      width: 960px;
      height: 93px;
      padding-left: 75px;
      display: flex;
      align-items: center;
    }
    .titlecen {
      width: 1560px;
      height: 200px;
      display: flex;
      .titlecen1 {
        margin-top: 50px;
        margin-left: 117px;
      }
      .titlecen2 {
        margin-top: 60px;
        margin-left: 117px;
      }
      .titlecen3 {
        margin-top: 50px;
        margin-left: 117px;
      }
    }
    .titleright {
      width: 500px;
      margin-left: 300px;
      display: flex;
      p {
        margin-top: 35px;
        font-size: 31px;
        margin-right: 20px;
        color: white;
      }
    }
  }
  .boby {
    width: 100%;
    height: 1812px;
    display: flex;
    .bobyleft {
      width: 2400px;
      height: 1812px;
      padding-left: 60px;
      .bobylefttop {
        height: 100px;
        background: url("../assets/images/home/组 合@1x (2).png") no-repeat;
        margin-top: 30px;
      }
      .bobyleftcen {
        height: 1696px;
        display: flex;
        padding-bottom: 30px;
        .bobyleftcenleft {
          width: 1146px;
          height: 1696px;

          .bobyleftcenlefttop {
            width: 1146px;
            height: 550px;
            display: flex;
            justify-content: space-between;
            margin-top: 60px;
            margin-bottom: 160px;

            .qixiang {
              width: 509px;
              height: 548px;
              background: url("../assets/images/home/1 (3).png") no-repeat;
            }
            .duibi {
              width: 509px;
              height: 548px;
              background: url("../assets/images/home/1 (3).png") no-repeat;
            }
          }
          .bobyleftcenleftcen {
            margin-top: 120px;
            margin-bottom: 50px;
            margin-left: 30px;
            width: 1146px;
            height: 428px;
            background: url("../assets/images/home/1 (2).png") no-repeat;
          }
          .bobyleftcenleftfoot {
            width: 1146px;
            height: 450px;
            display: flex;
            margin-top: 67px;
            justify-content: space-between;
            .qxian {
              width: 560px;
              height: 460px;
              background: url("../assets/images/home/1 (1).png") no-repeat;
            }
            .mei {
              width: 560px;
              height: 460px;
              background: url("../assets/images/home/1 (1).png") no-repeat;
            }
          }
        }
        .bobyleftcenright {
          width: 1100px;
          height: 1696px;
          margin-left: 30px;
          .bobyleftcenrighttop {
            width: 1081px;
            height: 675px;
            background: url("../assets/images/home/2 (2).png") no-repeat;
            padding-top: 25px;
          }
          .bobyleftcenrightcen {
            margin-top: 70px;
            margin-bottom: 65px;
            height: 440px;
            width: 1100px;
            background: url("../assets/images/home/2 (1).png") no-repeat;
          }
          .bobyleftcenrighfoot {
            height: 460px;
            width: 1100px;
            background: url("../assets/images/home/2 (3).png") no-repeat;
          }
        }
      }
    }
    .bobyright {
      width: 1260px;
      height: 1812px;
      .bobyrighttop {
        height: 100px;
        background: url("../assets/images/home/组 合@1x (8).png") no-repeat;
        margin-top: 30px;
      }
      .bobyrighttopcen {
        width: 1218px;
        height: 321px;
        background: url("../assets/images/home/3 (2).png") no-repeat;
        padding-top: 20px;
        padding-left: 20px;
      }
      .bobyrighttopcen1 {
        width: 1218px;
        height: 437px;
        margin-top: 35px;
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .jizu {
          width: 595px;
          height: 437px;
          background: url("../assets/images/home/3 (1).png") no-repeat;
          padding-top: 30px;
        }
        .fadian {
          width: 550px;
          height: 460px;
          background: url("../assets/images/home/1 (1).png") no-repeat;
        }
      }
      .bobyrighttopcen2 {
        width: 1218px;
        height: 460px;
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .fuhe {
          width: 550px;
          height: 460px;
          background: url("../assets/images/home/1 (1).png") no-repeat;
        }
        .meihao {
          width: 550px;
          height: 460px;
          background: url("../assets/images/home/1 (1).png") no-repeat;
        }
      }
      .bobyrighttopfoot {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 1218px;
        height: 415px;
        .jizujie {
          width: 550px;
          height: 460px;
          background: url("../assets/images/home/1 (1).png") no-repeat;
        }
        .zhibiao {
          width: 550px;
          height: 460px;
          background: url("../assets/images/home/1 (1).png") no-repeat;
        }
      }
    }
  }
}
</style>